<!DOCTYPE html>
<html>

	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-25
        	描述：
        -->
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../base/plugins/layui/css/layui.css" media="all" />
	</head>

	<body>
		<blockquote class="site-text layui-elem-quote">
			<h3>登录日志</h3>
		</blockquote>

		<div class="layui-row">
			<div class="layui-col-md7">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						<input type="text" name="password" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="password" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn">搜索</button>
				</div>
			</div>
			<hr/>
			<div class="layui-row">
				<form class="layui-form" action="">
					<table class="layui-table">
						<colgroup>
							<col width="150">
							<col width="150">
							<col width="200">
							<col width="130">
							<col width="200">
						</colgroup>
						<thead>
							<tr>
								<th>账号</th>
								<th>ip</th>
								<th>登陆时间</th>
								<th>登录类型</th>
								<th>状态</th>
								<th>手机/浏览器</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
					<div id="test1"></div>  <!--这里是分页代码  里面的选择器只能用ID-->
				</form>

			</div>
		</div>
		
		<script src="../../../base/js/jquery-1.11.3.min.js"></script>
		<script src="../../../base/plugins/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['element','laypage', 'form'], function() {
				var laypage = layui.laypage;
				var tato;
				
			function jsondata(page,row) {
				
				$.ajax({
					type: "get",
					url: "http://127.0.0.1:8080/ssmService/loginLog/selectPageLoginLog",
					async: false,
					data:{
						
						"queryParams.curr_page": page,
						"queryParams.page_size": row
					},
					"beforSend":function(){
						alert("dd");
						
						index=layer.load(1,{
							shade:[0.5,"red"]
						});
					},
					"success": function(result) {
						
						if(result.resultCode==0){
							mydata(result);
							tato=result.data.total;
								//执行一个laypage实例
						  	
							xuanran();
						}else{
							layer.msg("服务器错误，请稍后登录")
						}
						
					}
					
				});


				function mydata(result) {
					if(result.code == 0) {
						$.each(result.data.list, function(infoIndex, info) {
							//遍历ajax中的数据，infoIndex是第几个对象，返回的是一个数字，info返回的是对象
							alert(infoIndex);
							var account = info["user_account"];
							var ip = info["request_ip"];
							var day = new Date(parseInt(info["login_date"])).toLocaleString();
							//解析json中的date数据，变成String格式
							if(info["type"] == 0) {
								var liexin = "PC端";
							} else if(info["type"] == 1) {
								var liexin = "Android端";
							}
							if(info["state"] == 1) {
								var state = "登录成功";
							} else {
								var state = "登录失败";
							}
							var model = info["model_number"];
							var td = "<tr></tr>";
							var daccount = "<td>" + account + "</td>";
							var dip = "<td>" + ip + "</td>";
							var dday = "<td>" + day + "</td>";
							var dliexin = "<td>" + liexin + "</td>";
							var dstate = "<td>" + state + "</td>";
							var dmodel = "<td>" + model + "</td>";
							$("tbody").append(td).append(daccount, dip, dday, dliexin, dstate, dmodel);
						});
					}
				}

				function xuanran() { //这里是给layui从新渲染一遍		
						var element = layui.element;
						element.init();
						var form = layui.form;
						form.render();
				}
			}
			jsondata(1,30);
			laypage.render({
					elem: 'test1' ,//注意，这里的 test1 是 ID，不用加 # 号,绑定页面节点id，只能绑定id
					count: tato,//数据总数，从服务端得到
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
					jump:function(obj,first){  //当前分页执行成功的回调函数
						//obj.curr当前页面   obj.limit当前页所容纳的最大条数
						$("tbody").empty();
						jsondata(obj.curr,obj.limit);	
					}
			});
		});
		</script>
	</body>

</html>